<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="/js/jquery-3.6.4.js"></script>
    <script>
        $(document).ready(function() {
            // 加载用户列表
            function loadUsers() {
                $.ajax({
                    url: '/api/users/',
                    type: 'GET',
                    success: function(users) {
                        var table = $('#usersTable');
                        table.empty(); // 清空原有数据
                        $.each(users, function(index, user) {
                            table.append(
                                '<tr>' +
                                '<td>' + user.username + '</td>' +
                                // 注意：密码不应该在前端页面上明文展示
                                '<td>*******</td>' +
                                '<td><button class="edit-btn" data-id="' + user.id + '">编辑</button></td>' +
                                '</tr>'
                            );
                        });
                    },
                    error: function() {
                        alert('无法加载用户列表');
                    }
                });
            }

            // 绑定编辑按钮事件
            $('#usersTable').on('click', '.edit-btn', function() {
                var userId = $(this).data('id');
                // 转到更新用户的页面，并携带用户ID
                window.location.href = '/updateuser?id=' + userId;
            });

            loadUsers(); // 初始化加载用户列表
        });
    </script>
    <style>
        body {
            padding-top: 20px;
        }
        .container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        th, td {
            padding: 8px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #f4f4f4;
        }
        .edit-btn {
            margin: 5px;
            padding: 5px 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>用户列表</h1>
<table id="usersTable" border="1">
    <thead>
    <tr>
        <th>账号</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <!-- 用户数据将通过AJAX动态加载 -->
    </tbody>
</table>
</body>
</html>